<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华广资源共享管理站-视频</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>

<body>
    <!-- 头栏菜单 -->
    <nav class="navbar navbar-default " role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                <a class="navbar-brand" href="index.html">资源共享站</a>
            </div>
            <div>
                <!-- 头导航 -->
                <ul class="nav navbar-nav" class="nav navbar-nav navbar-right">
                    <li><a href="index.html"><span class=" glyphicon glyphicon-home">首页</span></a></li>
                    <li><a href="#">动态</a></li>
                    <li><a href="#">分享</a></li>
                    <li><a href="#">更多</a></li>
                </ul>
                <!-- 用户信息 -->
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-user"></span>王梓键
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">个人资料</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class=" container-fluid">
        <div class="row">
            <!-- 侧栏菜单 -->
            <div class="col-sm-3 col-md-2 side-left">
                <ul class="nav nav-pills nav-stacked first-ul">
                    <ul class="nav nav-pills nav-stacked ">
                        <li role="presentation">
                            <a href="index.html"><span class="glyphicon glyphicon-file"></span>全部文件</a>
                        </li>
                        <li role="presentation">
                            <a href="photo.html">&nbsp;&nbsp;&nbsp;&nbsp;图片</a>
                        </li>
                        <li role="presentation">
                            <a href="table.html">&nbsp;&nbsp;&nbsp;&nbsp;文档</a>
                        </li>
                        <li role="presentation" class="active">
                            <a href="vido.html">&nbsp;&nbsp;&nbsp;&nbsp;视频</a>
                        </li>
                        <li role="presentation">
                            <a href="seed.html">&nbsp;&nbsp;&nbsp;&nbsp;种子</a>
                        </li>
                        <li role="presentation">
                            <a href="music.html">&nbsp;&nbsp;&nbsp;&nbsp;音乐</a>
                        </li>
                        <li role="presentation">
                            <a href="another.html">&nbsp;&nbsp;&nbsp;&nbsp;其他</a>
                        </li>
                        <br>
                        <li role="presentation">
                            <a href="myShare.html"><span class="glyphicon glyphicon-share"></span>我的分享</a>
                        </li>
                        <li role="presentation">
                            <a href="recycle.html"><span class="glyphicon glyphicon-trash"></span>回收站</a>
                        </li>
                    </ul>
                    <br>
                    <!-- 进度条 -->
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
                            <span class="sr-only">10% Complete</span>
                        </div>
                    </div>
                    <span class="text">100G/1000G</span>
            </div>
        </div>

        <!--资料界面-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 data">
            <!--工具栏-->
            <div class="row tool">
                <div class="col-sm-8">
                    <div class="btn-group" style="margin-top: 10px;">
                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-upload"></span>  上传 </span>
                        </button>

                    </div>

                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-download"></span>  离线下载
                         </button>
                    </div>


                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default">
                            <span class="glyphicon glyphicon-facetime-video"></span>  我的设备
                    </div>
                </div>

                <div class="col-sm-4">
                    <!--搜索框-->
                    <div class="input-group" style="margin-top: 10px;">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <span class="glyphicon glyphicon-search"></span></button>
                        </span>
                    </div>
                </div>
            </div>

            <!-- 资料显示 -->
            <div class="row">
                <div class="col-sm-4 col-md-2">
                    <span id="ltext">全部视频</span>
                </div>
                <div class="col-sm-4 col-md-8"></div>
                <div class="col-sm-4 col-md-2">
                    <span id="rtext">已全部加载，共10个</span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12 tb">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="chElt" onclick="checkOrCancelAll();" />视频名</th>
                                <th>大小</th>
                                <th>类型</th>
                                <th>日期</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox" name="vido">111111</td>
                                <td>111111</td>
                                <td>111221</td>
                                <td>
                                    <div class="vido-prog">
                                        <div class="progress progress-striped active  vido-prog">
                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="vido">Sachin</td>
                                <td>Mumbai</td>
                                <td>Sachin</td>
                                <td>
                                    <div class="progress progress-striped active vido-prog">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="vido">Sachin</td>
                                <td>Mumbai</td>
                                <td>Sachin</td>
                                <td>已完成</td>
                            </tr>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
</body>

<script type="text/javascript">
    //页面加载的时候,所有的复选框都是未选中的状态
    function checkOrCancelAll() {
        //1.获取checkbo的元素对象
        var chElt = document.getElementById("chElt");
        //2.获取选中状态
        var checkedElt = chElt.checked;
        console.log(checkedElt)
            //3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
        var allCheck = document.getElementsByName("vido");
        //4.循环遍历取出每一个复选框中的元素
        //var mySpan=document.getElementById("mySpan");
        if (checkedElt) {
            //全选
            for (var i = 0; i < allCheck.length; i++) {
                //设置复选框的选中状态
                allCheck[i].checked = true;
            }
            //mySpan.innerHTML="取消全选";
        } else {
            //取消全选
            for (var i = 0; i < allCheck.length; i++) {
                allCheck[i].checked = false;
            }
            //mySpan.innerHTML="全选";
        }
    }
</script>

</html>